<template>
  <a-spin :loading="spinLoading" :size="35" class="w-[100%]" tip="正在处理, 请稍候...">
    <a-form ref="formRef" :model="form" :rules="rules" auto-label-width layout="vertical">
      <div class="flex justify-between" style="flex-wrap: wrap;">
        <a-form-item class="w-[49%]" field="tenantName" label="租户名称" required>
          <a-input v-model="form.tenantName" placeholder="租户名称"/>
        </a-form-item>
        <a-form-item class="w-[49%]" field="packageId" label="租户套餐" required>
          <a-select v-model="form.packageId" allow-clear placeholder="租户套餐">
            <a-option v-for="(d, index) in dicts[proxy.DICT.tenantPackageList]" :key="index" :label="d.dictValue"
                      :value="d.dictKey"/>
          </a-select>
        </a-form-item>
        <a-form-item class="w-[49%]" field="expireTime" label="过期时间" required>
          <a-date-picker v-model="form.expireTime" class="w-[100%]" disabled-input format="YYYY-MM-DD HH:mm:ss"
                         placeholder="过期时间" show-time/>
        </a-form-item>
        <a-form-item class="w-[49%]" field="accountCount" label="账号额度" required
                     tooltip="表示该租户下可以创建多少个用户账号">
          <a-input-number v-model="form.accountCount" :min="0" placeholder="账号额度"/>
        </a-form-item>
        <a-form-item class="w-[49%]" field="dataIsolation" label="数据隔离方式" required tooltip="多租户数据隔离方式">
          <a-select v-model="form.dataIsolation" allow-clear placeholder="数据隔离方式">
            <a-option v-for="(d, index) in dicts[proxy.DICT.tenantDataIsolation]" :key="index" :label="d.dictValue"
                      :value="d.dictKey"/>
          </a-select>
        </a-form-item>
        <a-form-item class="w-[49%]" field="storageId" label="文件存储方式" required>
          <a-select v-model="form.storageId" allow-clear placeholder="文件存储方式">
            <a-option v-for="(d, index) in dicts[proxy.DICT.storageList]" :key="index" :label="d.dictValue"
                      :value="d.dictKey"/>
          </a-select>
        </a-form-item>
        <a-form-item v-if="props.params.operationType === proxy.operationType.update.type" class="w-[49%]"
                     field="status"
                     label="租户状态">
          <a-select v-model="form.status" allow-clear placeholder="租户状态">
            <a-option v-for="(d, index) in dicts[proxy.DICT.commonNumberStatus]" :key="index" :label="d.dictValue"
                      :value="d.dictKey"/>
          </a-select>
        </a-form-item>
        <a-form-item class="w-[100%]" field="remark" label="备注">
          <a-textarea v-model="form.remark" placeholder="备注"/>
        </a-form-item>


        <!-- 数据源名称：选择隔离方式为db时，需要配置数据源信息 -->
        <template v-if="form.dataIsolation === 'db'">
          <a-divider orientation="left">
            租户的数据源信息
          </a-divider>
          <a-form-item class="w-[49%]" field="datasourceName" label="数据源名称">
            <a-input v-model="form.tenantDatasource.datasourceName" placeholder="数据源名称"/>
          </a-form-item>
          <a-form-item class="w-[49%]" field="datasourceUrl" label="数据源连接">
            <a-textarea v-model="form.tenantDatasource.datasourceUrl" placeholder="数据源连接"/>
          </a-form-item>
          <a-form-item class="w-[49%]" field="username" label="数据源用户名">
            <a-input v-model="form.tenantDatasource.username" placeholder="数据源用户名"/>
          </a-form-item>
          <a-form-item class="w-[49%]" field="password" label="数据源密码">
            <a-input-password v-model="form.tenantDatasource.password" placeholder="数据源密码"/>
          </a-form-item>
        </template>

        <!-- 租户与用户绑定 -->
        <a-divider v-if="props.params.operationType === proxy.operationType.add.type" orientation="left">
          租户的用户信息
        </a-divider>

        <!-- 新增时，添加用户信息 -->
        <a-form-item v-if="props.params.operationType === proxy.operationType.add.type" class="w-[49%]" field="username"
                     label="用户账号"
                     tooltip="用户登录系统使用的账号">
          <a-input v-model="form.user.username" placeholder="用户账号"/>
        </a-form-item>
        <a-form-item v-if="props.params.operationType === proxy.operationType.add.type" class="w-[49%]" field="password"
                     label="用户密码">
          <a-input-password v-model="form.user.password" placeholder="用户密码"/>
        </a-form-item>
        <a-form-item v-if="props.params.operationType === proxy.operationType.add.type" class="w-[49%]" field="nickname"
                     label="用户昵称"
                     tooltip="用户的网名">
          <a-input v-model="form.user.nickname" placeholder="用户昵称"/>
        </a-form-item>
        <a-form-item v-if="props.params.operationType === proxy.operationType.add.type" class="w-[49%]"
                     field="userRealName"
                     label="用户真实姓名">
          <a-input v-model="form.user.userRealName" placeholder="用户真实姓名"/>
        </a-form-item>
        <a-form-item v-if="props.params.operationType === proxy.operationType.add.type" class="w-[49%]" field="phone"
                     label="手机号">
          <a-input v-model="form.user.phone" placeholder="手机号"/>
        </a-form-item>
        <a-form-item v-if="props.params.operationType === proxy.operationType.add.type" class="w-[49%]" field="email"
                     label="邮箱">
          <a-input v-model="form.user.email" placeholder="邮箱"/>
        </a-form-item>
        <a-form-item v-if="props.params.operationType === proxy.operationType.add.type" class="w-[49%]" field="userSex"
                     label="用户性别">
          <a-select v-model="form.user.userSex" allow-clear allow-search placeholder="用户性别">
            <a-option v-for="(d, index) in dicts[proxy.DICT.userSex]" :key="index" :label="d.dictValue"
                      :value="d.dictKey"/>
          </a-select>
        </a-form-item>
      </div>
    </a-form>

    <!-- 分割线 -->
    <a-divider class="mt-0"/>

    <div class="flex justify-end">
      <a-space>
        <a-button @click="cancelBtnClick()">取消</a-button>
        <a-button type="primary" @click="okBtnClick()">确定</a-button>
      </a-space>
    </div>
  </a-spin>
</template>

<script setup>
import {getCurrentInstance, reactive, ref, watch} from 'vue'
import {addTenantApi, getTenantByTenantIdApi, updateTenantByTenantIdApi} from "~/api/basic/tenant.js";

//全局实例
const {proxy} = getCurrentInstance()
//加载字典
const dicts = proxy.LoadDicts([proxy.DICT.commonNumberStatus, proxy.DICT.tenantPackageList, proxy.DICT.userSex, proxy.DICT.tenantDataIsolation, proxy.DICT.storageList])
//接收父组件参数
const props = defineProps({
  params: {
    type: Object,
    default: () => {
    }
  }
})
//父组件函数
const emits = defineEmits(['ok', 'cancel'])
//加载中...
const spinLoading = ref(false)
//表单ref
const formRef = ref(null)
//默认数据源信息
const defaultTenantDatasource = {
  datasourceName: null,
  datasourceUrl: 'jdbc:mysql://localhost:3306/minimalist?useUnicode=true&characterEncoding=UTF-8&useSSL=false&serverTimezone=Asia/Shanghai&allowMultiQueries=true&useAffectedRows=true&rewriteBatchedStatements=true',
  username: null,
  password: null
}
//表单
const form = reactive({
  //租户ID
  tenantId: null,
  //租户名称
  tenantName: null,
  //租户套餐
  packageId: null,
  //联系人
  userId: null,
  //账号额度
  accountCount: null,
  //过期时间
  expireTime: null,
  //数据隔离方式
  dataIsolation: null,
  //数据源名称
  datasource: null,
  //存储ID
  storageId: null,
  //租户状态
  status: null,
  //备注
  remark: null,
  //用户信息，新增租户时填充数据
  user: {
    //用户账号
    username: null,
    //用户密码
    password: null,
    //用户昵称
    nickname: null,
    //用户真实姓名
    userRealName: null,
    //手机号
    phone: null,
    //邮箱
    email: null,
    //用户性别
    userSex: null
  },
  //数据源信息，隔离方式为db时填充数据
  tenantDatasource: defaultTenantDatasource
})
//表单校验规则
const rules = {
  tenantName: [{required: true, message: '租户名称不能为空', trigger: 'submit'}],
  packageId: [{required: true, message: '租户套餐不能为空', trigger: 'submit'}],
  accountCount: [{required: true, message: '账号额度不能为空', trigger: 'submit'}],
  expireTime: [{required: true, message: '过期时间不能为空', trigger: 'submit'}],
  dataIsolation: [{required: true, message: '数据库隔离方式不能为空', trigger: 'submit'}],
  storageId: [{required: true, message: '租户文件存储方式不能为空', trigger: 'submit'}]
}
//确定 -> 点击
const okBtnClick = () => {
  //表单验证
  formRef.value.validate((valid) => {
    if (valid) {
      return false
    }
    //添加
    if (props.params.operationType === proxy.operationType.add.type) {
      spinLoading.value = true
      addTenantApi(form).then(() => {
        proxy.$msg.success(proxy.operationType.add.success)
        emits('ok')
      }).finally(() => {
        spinLoading.value = false
      })
    }
    //修改
    if (props.params.operationType === proxy.operationType.update.type) {
      spinLoading.value = true
      updateTenantByTenantIdApi(form).then(() => {
        proxy.$msg.success(proxy.operationType.update.success)
        emits('ok')
      }).finally(() => {
        spinLoading.value = false
      })
    }
  })
}
//取消 -> 点击
const cancelBtnClick = () => {
  emits('cancel')
}
//加载租户详细信息
const loadTenantInfo = (tenantId) => {
  spinLoading.value = true
  getTenantByTenantIdApi(tenantId).then(res => {
    //数据赋值
    if (res) {
      for (let key in res) {
        if (form.hasOwnProperty(key)) {
          //回显数据源信息
          if (key === 'tenantDatasource') {
            if (res[key]) {
              form[key] = res[key]
            } else {
              form[key] = defaultTenantDatasource
            }
          } else {
            form[key] = res[key]
          }
        }
      }
      form.packageId = form.packageId === '0' ? Number(form.packageId) : String(form.packageId)
    }
  }).finally(() => {
    spinLoading.value = false
  })
}
//监听参数变化
watch(() => props.params, (newVal, oldVal) => {
  //租户ID
  if (props.params.tenantId) {
    //加载租户信息
    loadTenantInfo(props.params.tenantId)
  }
}, {deep: true, immediate: true})
</script>
<style scoped></style>
